<template>
	<!-- 产品详情 -->
	<view class="contener">
		<image
			class="img_box"
			src="@/static/image/img_bg_chanpinxiangqing@2x.png"
			mode=""
		></image>
		<view class="contener_box">
			<view class="nav_box">
				<view class="nav_a">
					<view class="nav_left">
						<text>
							{{ detailsList.simplifyName }}({{
								detailsList.company
							}})
						</text>
					</view>
					<view class="nav_right">
						<text>{{ desList.minPurchase }}</text>
						<text>起购金额(元)</text>
					</view>
				</view>
				<view class="nav_b">
					<view>
						<text class="nav-text_a">
							{{ desList.yearUp }}
						</text>
						<text>近一年涨跌幅</text>
					</view>
					<view>
						<text class="nav-text_b">
							{{ desList.dayUp }}
						</text>
						<text>日涨跌幅</text>
					</view>
					<view>
						<text class="nav-text_c">
							{{ desList.netWorth }}
						</text>
						<text>净值(06-17)</text>
					</view>
				</view>
			</view>
			<view class="charts_box">
				<view class="nav_charts"><text>业绩走势</text></view>
				<view class="content">
					<view class="charts-box">
						<qiun-data-charts
							type="line"
							:chartData="chartsDataLine1"
						/>
					</view>
				</view>
			</view>
			<view class="ment_box">
				<view class="nav_ment"><text>历史业绩</text></view>
				<view class="flex_ment">
					<view class="ment_l">
						<text>时间区间</text>
						<text v-for="item in mentList" :key="item">
							{{ item }}
						</text>
					</view>
					<view class="ment_i">
						<text>涨跌幅</text>
						<text>{{ desList.weekUp }}</text>
						<text>{{ desList.monthUp }}</text>
						<text>{{ desList.threeMonthUp }}</text>
						<text>{{ desList.halfYearUp }}</text>
						<text>{{ desList.yearUp }}</text>
					</view>
					<view class="ment_r">
						<text>同类业绩排行</text>
						<text>
							<text>{{ desList.weekRank }}</text>
						</text>
						<text>
							<text>{{ desList.monthRank }}</text>
						</text>
						<text>
							<text>{{ desList.threeMonthRank }}</text>
						</text>
						<text>
							<text>{{ desList.halfYearRank }}</text>
						</text>
						<text>
							<text>{{ desList.yearRank }}</text>
						</text>
					</view>
				</view>
			</view>
			<view class="rule_box">
				<view class="rule_nav">
					<!-- <text
							v-for="item in tabList"
							:key="item.id"
							:class="[state? 'active_rule' : 'rule_line']"
							@tap="tab(item.id)"
						>
							{{ item.name }}
							<text :class="{ rule_line: item.state }"></text>
						</text> -->
					<text
						@tap="tabOne"
						:class="[state ? 'active_rule' : 'rule_line']"
					>
						交易规则
						<text
							:class="[state ? 'rule_line' : '']"
						></text>
					</text>
					<text
						@tap="tabTwo"
						:class="[state ? 'rule_line' : 'active_rule']"
					>
						基金档案
						<text
							:class="[state ? '' : 'rule_line']"
						></text>
					</text>
				</view>
				<!-- 交易规则 -->
				<view v-if="state" class="rule_cont">
					<u-steps
						:list="numList"
						:current="0"
						active-color="#3A6AF6"
						un-active-color="#3A6AF6"
					></u-steps>
					<view class="flex_rule">
						<view class="t_r"><text>买入</text></view>
						<view class="t_r"><text>确认份额</text></view>
						<view class="t_r"><text>查看盈亏</text></view>
					</view>
				</view>
				<view v-if="state" class="rule_int">
					<view class="rule_btn clearfix">
						<text class="ol_box"></text>
						<text class="text_box">
							起购金额10.00元, 追加金额0.01元,
							单日投资上限5000000.00元
						</text>
					</view>
					<view class="rule_btn clearfix">
						<text class="ol_box"></text>
						<text class="text_box">
							T日:交易日，以股市收市时间15点(不含)前为T日，股市收市时间15点（含)后为T+1，即下一个交易日，以支付成功时间为准。(周末和法定假日属于非交易日)
						</text>
					</view>
					<view class="rule_btn clearfix">
						<text class="ol_box"></text>
						<text class="text_box">
							T日申请，将按T日基金净值确认份额。份额确认当日，基金净值更新后即可查看首笔收益情况
						</text>
					</view>
					<view class="rule_put">
						<text>收起</text>
						<u-icon
							name="arrow-up"
							color="#BCC3CD"
							size="28"
						></u-icon>
					</view>
				</view>

				<!-- 基金档案 -->
				<view v-if="state == false" class="archives_box">
					<text class="archives_nav">基金档案</text>
					<view class="archives_flex">
						<view><text>基金全称</text></view>
						<view>
							<text>{{ detailsList.fullName }}</text>
						</view>
					</view>
					<view class="archives_flex">
						<view><text>基金代码</text></view>
						<view>
							<text>{{ detailsList.company }}</text>
						</view>
					</view>
					<view class="archives_flex">
						<view><text>基金规模</text></view>
						<view>
							<text>
								{{ detailsList.assetSize }}({{
									detailsList.assetSizeChangeDate
								}})
							</text>
						</view>
					</view>
					<view class="archives_flex">
						<view><text>基金管理人</text></view>
						<view>
							<text>{{ detailsList.nameAbb }}</text>
						</view>
					</view>
					<view class="archives_flex">
						<view><text>基金委托人</text></view>
						<view>
							<text>{{ detailsList.bank }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="state == false" class="ucherts_box">
				<text class="ucherts_nav">基金持仓(6-19)</text>
				<view class="content_box">
					<view class="charts-box">
						<!-- 演示动态改变eopts -->
						<qiun-data-charts
							type="rose"
							:chartData="chartsDataPie2"
						/>
					</view>
				</view>
			</view>
			<view class="btn_box">
				<view class="btn_l" @tap="fixedBtn">
					<text>定投</text>
				</view>
				<view class="btn_r" @tap="payBtn">
					<text>买入</text>
				</view>
			</view>
		</view>
		<view><u-toast ref="uToast" /></view>
	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
let { mapState, mapActions } = createNamespacedHelpers('manager');
let {
	mapState: userState,
	mapActions: userActions,
} = createNamespacedHelpers('user');
export default {
	data() {
		return {
			chartsDataLine1: {
				categories: ['', '', '', '', ''],
				series: [
					{
						name: '走向',
						data: [6.6, 4.9, 11.2, 1.1, 8.7],
					},
				],
			},
			mentList: [
				'近一月',
				'近一周',
				'近三月',
				'近半年',
				'近一年',
			],
			numList: [
				{
					name: '今日',
				},
				{
					name: '06-19',
				},
				{
					name: '06-20',
				},
			],
			state: true,
			chartsDataPie2: {
				series: [
					{
						data: [
							{
								name: '股票',
								value: 82.5,
							},
							{
								name: '银行',
								value: 12.25,
							},
							{
								name: '其他',
								value: 5.25,
							},
						],
					},
				],
			},
			fundCode: '',
			detailsList: [],
			desList: [],
			trendList: [],
		};
	},
	async onLoad(option) {
		this.detailsList = await this.getFundDetails(option.fundCode);
		this.desList = await this.getfundDes(option.fundCode);
		this.trendList = await this.getfundTrend(option.fundCode);
		this.getUcharts();
	},
	onUnload() {
		clearTimeout();
	},
	methods: {
		tabOne() {
			this.state = true;
		},
		tabTwo() {
			this.state = false;
		},
		// Ucharts赋值
		getUcharts() {
			console.log(this.trendList);
			let NewData = this.trendList.map(item => item.dayUp);
			console.log(NewData);
			this.chartsDataLine1.series[0].data = NewData;
		},
		// 获取详情数据
		...mapActions([
			'getFundDetails',
			'getfundDes',
			'getfundTrend',
		]),
		...userActions(['getToken']),
		//买入跳转
		async payBtn() {
			//判断也没有token
			let result = await this.getToken();
			if (result.code == 0) {
				this.$refs.uToast.show({
					title: '请先登录',
					duration: 1000,
					type: 'error',
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '../Login/Login',
					});
				}, 1500);
			} else {
				uni.navigateTo({
					url:
						'../payment_Bthree/payment_Bthree?fundCode=' +
						this.detailsList.code +
						'&simplifyName=' +
						this.detailsList.simplifyName,
				});
			}
		},
		// 定投
		fixedBtn() {
			uni.navigateTo({
				url: '../letone/letone',
			});
		},
	},
};
</script>

<style lang="scss">
@import 'css/details_Btwo.scss';
.content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.charts-box {
	width: 100%;
	height: 500rpx;
}
</style>
